<template>
  <div>
    
     <el-form
        ref="send_form"
        :rules="send_rules"
        :model="send_goods"
        label-width="120px"
        
      >
      <!--startprint-->
        <el-form-item label="收货人信息:" prop="express">
          <el-tag type="success">{{select_row.leader_name}}</el-tag>
          <el-tag v-if="select_row.user_tel!=''">{{select_row.user_tel}}</el-tag>
        </el-form-item>
        
        <el-form-item label="收货人地址:" prop="express" v-if="select_row.user_tel!=''">
          {{select_row.leader_full_address}}
        </el-form-item>
        <div v-if="print.length>0">
        <el-form-item  label="物品名称:" prop="text">
          <el-input
            v-model="send_goods.goods_name"
            placeholder="打印到物流单上的物品名称"
          />
        </el-form-item>
        <el-form-item  label="物流单备注:" prop="text">
          <el-input
            v-model="send_goods.remark"
            type="textarea"
            :rows="3"
            placeholder="此备注将打印到物流单上"
          />
        </el-form-item>
      <el-form-item label="打印物流单:" prop="express" v-for="(item,i) in print" :key=i>
          <el-select
            v-model="item.kuaidicom"
            style="width:50%"
            disabled
            placeholder="请选择"
          >
            <el-option
              v-for="item in send_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button type="primary" size="small" icon="el-icon-printer" @click="print_order(item)">打印物流单并发货</el-button>
        </el-form-item>
        </div>
        <div v-if="send_goods.express_sn!='自提'">
        <el-form-item label="方式:" >
          <el-radio-group v-model="radio_type">
            <el-radio-button label="快递公司"></el-radio-button>
            <el-radio-button label="线下配送"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="radio_type=='快递公司'" >
        <el-form-item label="快递编号:" prop="express_sn">
          <el-input placeholder="请输入快递编号" v-model="send_goods.express_sn" style="width:80%"/>
        </el-form-item>
        <el-form-item label="快递公司名称:" prop="express_name" >
          <el-select
            v-model="send_goods.express_id"
            style="width:80%"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in send_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <!-- <el-input v-model="send_goods.express_name" /> -->
        </el-form-item>
        </div>
        </div>
      </el-form>
      <!--endprint-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSend">发 货</el-button>
        <el-button type="success" v-if="print_visible" v-print="'#print1'">打印</el-button>
        <el-button type="success" v-if="print_visible==false" @click="print_visible=true">打印出货单</el-button>
      </div>
     <!-- <el-dialog title="打印出货单" :visible.sync="print_visible" width="20%"> -->
<div id="print1" style="padding-left: 5px; padding-right: 5px;margin:0 10px;" v-if="print_visible">
  <table style="width: 100%" id="printTest">
  <tr>
    <td style="text-align: center;font-size: 20px;padding-bottom:20px" colspan="2">{{web_name}}</td>
  </tr>
  <tr >
    <td colspan="2"  class="hui" style="font-size:12px">下单时间:<span class="hei" style="font-size:13px">{{select_row.create_time}}</span></td>
  </tr>
  <tr >
    <td colspan="2" class="bian hui" style="font-size:12px">订单号:<span class="hei" style="font-size:13px">{{select_row.sn}}</span></td>
  </tr>
  <div v-for="(item,index) in select_row.order_goods" :key="index">
     <tr  class="flax">
        <td style="width:60%;padding-right:5px" >{{item.goods_title}}</td>
        <td  style="width:15%">*{{item.goods_num}}</td>
        <td  style="width:25%">¥{{item.goods_price}}</td>
      </tr>
      <tr  v-if="item.spec_key_name!=''">
        <td style="width:100%;padding-right:5px;font-size:15px" class="hui">{{item.spec_key_name}}</td>
      </tr>
      <tr  v-if="item.goods_append!=undefined&&item.goods_append.drug_spec!=''">
        <td style="width:100%;padding-right:5px;font-size:15px" class="hui">{{item.goods_append.drug_spec}}</td>
      </tr>
  </div>
  <tr>
    <td colspan="2" style="text-align:right;font-size:17px" class="bian hui">总金额:<span class="hei">{{select_row.total_amount}}</span></td>
  </tr>
  <tr class="top_bian">
    <td style="font-size:17px">{{select_row.leader_name}}</td>
  </tr>
  <tr >
    <td style="font-size:17px">{{select_row.user_tel}}</td>
  </tr>
  <tr >
    <td>{{select_row.leader_full_address}}</td>
  </tr>
  <!-- <div v-if="send_goods.express_sn.length>3">
    <tr >
      <td>{{send_goods.express_sn}}</td>
    </tr>
    <tr >
      <td>{{send_goods.express_sn}}</td>
    </tr>
  </div> -->
  </table>
</div>
    <!-- </el-dialog> -->
    
  </div>

</template>

<script>

export default {
  props:['send_goods','select_row','print','send_options'],
  computed: {
    web_name() {
      return this.$store.state.user.name
    },
  },
  data() {
    return {
      print_visible:false,
       send_rules: {
        express_sn: [
          { required: true, message: '请输入快递编号', trigger: 'blur' }
        ],
        express_name: [
          { required: true, message: '请输入快递公司名称', trigger: 'blur' }
        ]
      },
      radio_type:"快递公司",
    }
  },
  mounted() {
  },
  methods: {
    print_order(item){
      let form={}
      form=this.send_goods
      form.user={
        leader_name:this.select_row.leader_name,
        user_tel:this.select_row.user_tel,
        leader_full_address:this.select_row.leader_full_address,
      }
      form.print_id=item.id
        this.get('/shop/Order/print_order', form, 'POST').then(e => {
          if(e.msg!=undefined){
            this.$message({message: e.msg,type: 'success'})
            return
          }
          if(e.returnCode!=undefined&&e.returnCode!=200){
            this.$message({message: e.message,type: 'success'})
            return
          }
          this.$message({message: '发货成功',type: 'success'})
          this.$emit('closeDelivery', true)
      })
    },
    close(){
      this.$emit('closeDelivery', false)
    },
    print_bill(){
     let bdhtml=window.document.body.innerHTML;   
    let sprnstr="<h4>"+this.web_name+"</h4><br>";   
    sprnstr+="<p>下单时间:</p>"+"<p>08-20 11:15</p>"
    window.document.body.innerHTML=sprnstr;  
    window.print();
    window.document.body.innerHTML=bdhtml
    },
    // 发货
    onSend() {
      this.$refs['send_form'].validate(valid => {
        console.log(this.send_goods)
        if(this.radio_type=='线下配送'){
          this.send_goods.express_id=0
          this.send_goods.express_sn='线下配送'
        }
        this.get('/shop/Order/delivery', this.send_goods, 'POST').then(e => {
          this.$message({
            message: '发货成功',
            type: 'success'
          })
          this.$emit('closeDelivery', true)
        })
      })
    },
  }
}
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.bian{
      border-bottom: 1px dashed #333;
}

.hui{
  color: #999
}
.hei{
  color: #000
}
.flax{
  display: flex;
  flex-wrap: wrap
}
.dialog-footer{
  margin: 20px;
}
</style>>
